<template>
	<view class="content" >
		
		<!-- 顶部导航栏 -->
		<view class="header" :style="{ paddingTop,position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
			<!-- 定位城市 -->
			<view class="addr">
				<uni-icons type="paperplane" color="#31b977" size="20"></uni-icons>
				{{ city }}
				<!-- <view class="icon location"></view> -->
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<uni-notice-bar v-if="notice" :show-icon="true" backgroundColor="" color="#31b977" :scrollable="true" :speed="40" :single="true"
					:text="notice" />
			</view>
		</view>
		<!-- 占位 -->
		<view :style="{paddingTop}" class="place"></view>
		<view class="page-section-spacing">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
				<swiper-item v-for="(item,index) in lunbo" :key="index">
					<image :src="item.src" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="static">
			<view class="static-item">
				<view class="static-item-type">累计回收</view>
				<view class="static-item-number">{{weight}}<span style="font-size: 24upx;">kg</span></view>
			</view>
			<view class="static-item">
				<view class="static-item-type">累计收益</view>
				<view class="static-item-number">{{integral}} <span style="font-size: 24upx;">元/积分</span></view>
			</view>
		</view>
		<template v-for="(item,index) in typeList">
			<view class="order-class" v-if="index<typeList.length&&index%2==0">
				<view class="order-class-item" @click="addOrder(index)">
					<image :src="typeList[index].home" mode="aspectFill"></image>
				</view>
				<view class="order-class-item" @click="addOrder(1+index)" v-if="index<typeList.length-1"
					style="margin-left: 8upx;">
					<image :src="typeList[index+1].home" mode="aspectFill"></image>
				</view>
			</view>
		</template>
		<view class="phone">
			<view class="phone-item" style="margin-left: 30upx;" >服务热线</view>
			<view class="phone-item" style="margin-right: 30upx;display: flex;color: #31b977;" @click="openPhone()">
				<view>{{config.phone}}</view>
				<uni-icons type="phone-filled" color="#31b977" size="16"></uni-icons>
			</view>
		</view>
		<view class="other">
			<view class="other-title">
				其他功能
			</view>
			<view class="other-content">
				<view class="other-content-item" @click="toMap">
					<image src="/static/images/qt1.png"></image>
					<view>附近回收员</view>
				</view>
				<view class="other-content-item" @click="changePage()">
					<image src="/static/images/qt2.png"></image>
					<view>服务咨询</view>
				</view>
				<view class="other-content-item" @click="changePage()">
					<image src="/static/images/qt3.png"></image>
					<view>积分商城</view>
				</view>
				<view class="other-content-item" @click="gotoPage()">
					<image src="/static/images/qt4.png"></image>
					<view>地址管理</view>
				</view>
			</view>
		</view>
		<view class="cu-reclaimss" @click="addOrder(1)">
			<view class="cu-reclaims">
				<view class="cu-reclaim">
					<image src="/static/images/xunhuan.svg" style="width:60upx;height:60upx;margin:50upx 80upx 4upx;">
					</image>
					<view style="color: #FFFFFF;text-align: center;font-size: 36upx;"> 一键预约</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {
		fakeLogin
	} from "@/api/index.js"
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				headerPosition: 'fixed',
				headerTop:"0px",
				paddingTop:null,
				afterHeaderOpacity: 1,//不透明度
				notice: "",
				lunbo: [],
				getWeiUser: "",
				wUserInfo: {},
				userInfo: {},
				config: {},
				typeList: [],
				weight: 0,
				city:"许昌",
				integral: 0,
				model: {
					userAddress: "", //预约地址
					addressId: ""
				}
			}
		},
		onShow() {
			this.$api("recovery-order", "getMyOrderLog").then(res => {
				let integral = 0,
					weight = 0
				if (res.data) {
					res.data.forEach(v => {
						integral += Number(v.integral)
						weight += Number(v.weight)
					})
				}
				this.integral = Number(integral).toFixed(1)
				this.weight = Number(weight).toFixed(1)
			})
		},
		async onLoad() {
			this.$api("garbage", "getGarbageType",{},"加载中").then(res => {
				this.typeList = res.data
				let temp = {}
				res.data.forEach(v => {
					temp[v._id] = v
				})
				getApp().globalData.GarbageType = temp
			})
			uni.getSystemInfo({
				success: (v) => {
					console.log(v)
					this.paddingTop=v.statusBarHeight-4+"px"
				}
			})
			//定位地址
			uni.getLocation({
				success: data => {
					console.log(data)
					uni.request({
						url:'https://restapi.amap.com/v3/geocode/regeo?location='+data.longitude+
						','+ data.latitude+
						'&key=739917e6ef56e4e27e30921366cc1d95',
						success: (data) => {
							this.city=data.data.regeocode.addressComponent.city.replace(/市/g, '')
							if(this.city!="许昌"){
								uni.showModal({
									title:"提示",
									content:"对不起，当前城市未开通上门回收服务。"
								})
							}
						}
					})
				}
			})
			//#ifdef MP
			wx.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
			this.$api("notice", "get", {
				isShow: 1,
				type: 1
			}).then(res => {
				this.notice = res.data[0].content
			})
			
			this.$api("banner", "get", {
				type: 0
			}).then(res => {
				this.lunbo = res.data
			})
			await this.$onLaunched
			this.$api("recovery-order", "getMyOrderLog").then(res => {
				let integral = 0,
					weight = 0
				if (res.data) {
					res.data.forEach(v => {
						integral += Number(v.integral)
						weight += Number(v.weight)
					})
				}
				this.integral = Number(integral).toFixed(1)
				this.weight = Number(weight).toFixed(1)
			})
			this.config = this.$store.state.config.systemConfig
		},
		methods: {
			toMap() {
				uni.navigateTo({
					url: "../map/user"
				})
			},
			addOrder(type) {
				getApp().globalData.homeType = this.typeList[type]._id
				uni.navigateTo({
					url: "../order/addOrder"
				})
			},
			gotoPage() {
				uni.navigateTo({
					url: "../user/address/address"
				})
			},
			changePage() {
				uni.showModal({
					title: "暂未开通，敬请期待！详情致电管理员：17603844084"
				})
			},
			openPhone() {
				console.log(this.config.phone)
				uni.makePhoneCall({
					phoneNumber: this.config.phone //仅为示例
				});
			},
			getSelectAddress(item) {
				this.model.userAddress = item.locationAddress + "(" + item.addressDetail + ")"
				this.model.addressId = item.id;
			},

		}
	}
</script>

<style lang="scss">
	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
	
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
	
		.addr {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 28upx;
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}
		.input-box {
			width: calc(100% - 50px);
			height: 60upx;
			line-height: 0upx;
			position: relative;
			display: block;
		}
		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			.icon {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}
	.place {
		background-color: #ffffff;
		height: 100upx;
	}
	.content {
		height: auto;
	}

	.logo {
		height: 300upx;
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
		margin-top: 20upx;
	}

	.static {
		height: 200upx;
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
		background: white;
		-webkit-box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.1);
		-webkit-border-radius: 20upx;
		border-radius: 20upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.static-item {
		flex: 1;
		text-align: center;
	}

	.static-item-type {
		font-size: 36upx;
		color: #222222;
	}

	.static-item-number {
		margin-top: 40upx;
		font-size: 50upx;
		color: #31b977;
	}

	.page-section-spacing {
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
	}

	.swiper {
		height: 300upx;
		width: 100%;
	}

	// swiper-item 里面的图片高度
	swiper-item image {
		width: 100%;
		height: 300upx;
		border-radius: 20upx 20upx 0 0;
	}

	.order-class {
		display: flex;
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
	}

	.order-class-item {
		height: 200upx;
		width: calc(50% - 4upx);
	}

	.order-class-item image {
		width: 100%;
		height: 200upx;
		border-radius: 14upx;
	}

	.phone {
		width: calc(100% - 60upx);
		margin: 30upx 30upx;
		background-color: #F7F7F7;
		border-radius: 20upx 20upx 20upx 20upx;
		display: flex;
		height: 140upx;
		align-items: center;
		justify-content: space-between;
	}

	.phone-item {
		font-size: 32upx;
		color: #222222;
	}

	.other {
		width: calc(100% - 60upx);
		margin: 30upx 30upx 60upx;
	}

	.other-title {
		font-size: 40upx;
		color: #222222;
		font-weight: 700;
	}

	.other-content {
		margin-top: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.other-content-item {
		flex: 1;
		text-align: center;
	}

	.other-content-item image {
		width: 120upx;
		height: 100upx;
	}

	.cu-reclaim {
		height: 220upx;
		width: 220upx;
		border-radius: 110upx 110upx 110upx 110upx;
		background-color: rgba(50, 186, 120, 1);
		position: absolute;
		top: 20upx;
		left: 20upx;
	}

	.cu-reclaims {
		background-color: rgba(50, 186, 120, 0.5);
		height: 260upx;
		width: 260upx;
		border-radius: 130upx 130upx 130upx 130upx;
		position: absolute;
		top: 50upx;
		left: 50upx;
	}

	.cu-reclaimss {
		background-color: rgba(50, 186, 120, 0.3);
		height: 360upx;
		width: 360upx;
		margin: 0 auto;
		border-radius: 180upx 180upx 180upx 180upx;
		position: relative;
		animation: one-reclaim 0.6s infinite linear;
		animation-direction: alternate;
	}

	@keyframes one-reclaim {
		0% {
			opacity: 0;
			transform: scale(0.5);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>
